<template>
	<el-container>
	  <el-aside class="main3" width="700px">
		  <el-card class="box-card" style="border-radius: 4px" shadow="hover">
		    <div slot="header" class="clearfix">
		      <span>购物车</span>
			 {{ date | formaDate }}
		    </div>
		    <el-table
		        :data="saledata"
		        border
				show-summary
				:summary-method="getSummaries"
		        style="width: 100% ">
				<el-table-column
				  type="index"
				  label="#"
				  width="25">
				</el-table-column>
		        <el-table-column
		          prop="inventoryid"
		          label="商品编号"
		          width="70">
		        </el-table-column>
		    	<el-table-column
		    		prop="inventoryname"
		    		label="商品名称"
		    		width="170">
		    	</el-table-column>
		    	<el-table-column
		    		prop="inventoryprice"
		    		label="商品价格"
					sortable
		    		width="50">
		    	</el-table-column>
				<el-table-column
				  prop="inventorynum"
				  label="商品数量"
				  sortable
				  width="150">
				  <template slot-scope="scope">
				        <el-input-number size="mini" v-model="scope.row.inventorynum" @change="handleChange" :min="1" :max="1000" label="数量"></el-input-number>
				    </template>
				</el-table-column>
				<el-table-column
					prop="totalprice"
					label="商品总价格"
					sortable
					width="50">
					<template slot-scope="scope">
					   {{ (scope.row.totalprice = scope.row.inventoryprice *scope.row.inventorynum) | keepTwoNum}}
					</template>
				</el-table-column>
		    	<el-table-column
		    		label="操作">
		    		<template slot-scope="scope">
		    			<el-button type="danger" @click="Delete(scope.$index, scope.row)">删除</el-button>
		    		</template>
		    	</el-table-column>
		      </el-table><br />
			  
			  <template>
				  <el-button type="primary" @click="result">结算</el-button>
				  
			  </template>
		  </el-card>
	  </el-aside>
	  <el-main class="main3">
		  <el-card class="box-card" shadow="hover">
		    <div slot="header" class="clearfix">
		      <el-form :inline="true" :model="searchdata1" class="demo-form-inline">
		        <el-form-item>
		          <el-input v-model="searchdata1" placeholder="搜索" clearable="true"><el-button slot="append" @click="search" icon="el-icon-search"></el-button></el-input>
		        </el-form-item>
		      </el-form>
		    </div>
		    <el-table
		        :data="searchdata2"
		        border
		        style="width: 100% ">
		    	<el-table-column
		    		type="index"
					label="#"
		    		width="25">
		    	</el-table-column>
		        <el-table-column
		          prop="inventoryid"
		          label="商品编号"
		          width="100">
		        </el-table-column>
		    	<el-table-column
		    		prop="inventoryname"
		    		label="商品名称"
		    		width="170">
		    	</el-table-column>
		    	<el-table-column
		    		prop="inventoryprice"
		    		label="商品价格"
		    		width="100">
		    	</el-table-column>
		    	<el-table-column
		    		label="操作">
					<template slot-scope="scope">
						<el-button type="primary" @click="add(scope.$index, scope.row)">添加</el-button>
					</template>
		    	</el-table-column>
		      </el-table>
		  </el-card>
		  
	  </el-main>
	</el-container>

</template>

<script>
	var padaDate = function(value){
	     return value<10 ? '0'+value : value;
	  };
	export default {
		name: 'salesmanage',
		data() {
			return {
				searchdata1: "",
				searchdata2: [],
				saledata:[],
				nowTime: "",
				date: new Date(),
				nowDay: '',
			}
		},
		created() {
		    
		  },
		filters: {
		      keepTwoNum(value){
		        value = Number(value);
		        return value.toFixed(2)
		      },
			  formaDate:function(value){
			     //创建一个时间日期对象
			     var date = new Date();
			     var year = date.getFullYear();      //存储年
			     var month = padaDate(date.getMonth()+1);    //存储月份
			     var day = padaDate(date.getDate());         //存储日期
			     
			     //返回格式化后的日期
			     return year+'年'+month+'月'+day+'日';
			   }
		    },
		methods: {
		      handleChange(value) {
		              console.log(value);
		            },
			search() {
				
				var url="http://localhost:8848/inventory/search?inventoryid="+this.searchdata1+"&inventoryname="+this.searchdata1;
				
				this.$axios.get(url)
				.then( (resp) => {
					var u = resp.data;
					
					if (u != null) {
						console.log(u);
						this.searchdata2 = u;
					}
					else {
						this.$message.error("查询失败");
					}
				})
				.catch( (err) => {
					console.log("error=", err);
				})
			},
			add(index, row) {
				console.log(row);
				this.saledata.push(row);
				console.log(this.saledata);
				
			},
			Delete(index, row) {
				this.saledata.splice(index, 1);
			},
			result() {
				var saledata = JSON.stringify(this.saledata);
				console.log(saledata);
				this.getTime();
				
				this.$axios.post("http://localhost:8848/sale/insert", this.$qs.stringify({
					saledata: saledata,
					financedata: this.nowDay
					
				}))
				.then( (resp) => {
					var u = resp.data;
					if (u == 1) {
						this.$message.success("支付成功");
					}
					else {
						this.$message.error("支付失败");
					}
					console.log(u);
				})
				.catch( (err) => {
					console.log("error=", err);
				})
				
			},
			getSummaries(param) {
			    const { columns, data } = param;
			    const sums = [];
			    columns.forEach((column, index) => {
			    if (index === 0) {
			        sums[index] = "总计";
			        return;
			    }
			    const values = data.map((item) => Number(item[column.property]));
			            // 判断是否非数字或者空值
			    if (!values.every((value) => isNaN(value) || value === 0)) {
			        sums[index] = values.reduce((prev, curr) => {
			        const value = Number(curr);
			        if (!isNaN(value) && value > 0) {
								  
			            return prev + curr;
			        } else {
			            return prev;
						}
					}, 0);
				} else {
			        sums[index] = "";
			         }
			        });
					 //this.result = sum[4];
					console.log(this.result);
			         return sums;
			},
				        //
			onInputChange(row){
				row.totalprice = (row.inventorynum * row.inventoryprice).toFixed(2)
				          
			},
			getTime() {
				var year = this.date.getFullYear();
				var month = padaDate(this.date.getMonth()+1);
				var day = padaDate(this.date.getDate());
				this.nowDay = year+'-'+month+'-'+day;
				console.log(this.nowDay);
			}
			
						
		},
		
		mounted() {
			
		},
		beforeDestroy: function() {
		    //实例销毁前青出于定时器
		    if (this.timeId) {
		      clearInterval(this.timeId);
		    }
		  }
	}
</script>

<style>
	  .clearfix:before,
	    .clearfix:after {
	      display: table;
	      content: "";
	    }
	    .clearfix:after {
	      clear: both
	    }
</style>
